<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 未领取物资
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-form
            :inline="true"
            :model="query"
            class="demo-form-inline"
            label-width="20px"
        >
          <el-form-item label-width="20px">
            <el-select
                v-model="query.collegeId"
                filterable
                placeholder="请选择学院"
                @focus="getAllCollege()"
            >
              <el-option
                  v-for="item in options"
                  :key="item.sid"
                  :label="item.collegeName"
                  :value="item.sid"
                  :disabled="item.collegeName!=='全学院'? false:true"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
                v-model="query.majorId"
                filterable
                placeholder="请选择专业"
                @focus="getMajor()"
            >
              <el-option
                  v-for="item in optionsMajors"
                  :key="item.sid"
                  :label="item.majorName"
                  :value="item.sid"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
                v-model="query.className"
                filterable
                placeholder="请选择班级"
                @focus="getClassList()"
                style="width: 80%"
            >
              <el-option
                  v-for="item in classList"
                  :key="item.className"
                  :label="item.className"
                  :value="item.className"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
                v-model="query.studentName"
                placeholder="姓名"
                class="inline-input"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
                v-model="query.studentId"
                placeholder="学号"
                class="inline-input"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
            >搜索
            </el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="clist">
        <div><i class="el-icon-s-data"></i>物资领取查询</div>
      </div>
      <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
      >
        <el-table-column label="序号" type="index" :index="indexMethod"/>
        <el-table-column
            :show-overflow-tooltip="true"
            :prop="item.prop"
            :label="item.label"
            v-for="item in props"
            :key="item.prop"
        >
        </el-table-column>
        <el-table-column>
          <el-table-column
              label="操作"
              width="180"
              align="center"
              fixed="right"
          >
            <template #default="scope">
              <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="handleSelectReceive(scope.row.studentId)"
              >详情
              </el-button>
              <!--              <el-button-->
              <!--                  type="text"-->
              <!--                  icon="el-icon-delete"-->
              <!--                  class="red"-->
              <!--                  @click="handleDelete(scope.$index, scope.row.sid)"-->
              <!--              >删除-->
              <!--              </el-button-->
              <!--              >-->
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            :currentPage="query.pageNum"
            :page-sizes="[10, 20, 40]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageTotal"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";
import request from "../../utils/request";

const root = "/receive/";
const router = useRouter();
const props = [
  {label: "学号", prop: "studentId"},
  {label: "学生姓名", prop: "studentName"},
  {label: "身份证号", prop: "idCardNo"},
  {label: "性别", prop: "gender"},
  {label: "民族", prop: "nation"},
  {label: "学院名称", prop: "collegeName"},
  {label: "专业名", prop: "majorName"},
  {label: "班级名称", prop: "className"},
];
const query = reactive({
  collegeId: "",
  majorId: "",
  className: "",
  studentName: "",
  studentId: "",
  receiveStatus: "1",
  pageNum: 1,
  pageSize: 10,
});

const optionsMajors = ref([]);
const getMajor = () => {
  request
      .get("/major/queryList", {
        params: {collegeId: query.collegeId, type: 1},
      })
      .then((res) => {
        optionsMajors.value = res.data;
      });
};
//班级下拉框
const classList = ref([]);
const getClassList = () => {
  request
      .get("/class/byMajorIdOrCollegeId", {
        params: {majorId: query.majorId},
      })
      .then((res) => {
        classList.value = res.data;
      });
};
//学院下拉框
const options = ref([]);
const getAllCollege = () => {
  console.log(query.collegeId);
  request.get("/college/getAllCollege").then((res) => {
    options.value = res.data;
  });
};
const tableData = ref([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = () => {
  tableData.value = [];
  request
      .get("/receive/queryStudentClassInfo", {
        params: query,
      })
      .then((res) => {
        if (res.code !== "0") {
          ElMessage.warning(res.msg);
          tableData.value = [];
        } else {
          tableData.value = res.data.records;
          pageTotal.value = res.data.total;
          // query.collegeId = "";
          // query.majorId = "";
          // query.allocateDate = "";
          // query.studentName = "";
        }
      });
};
getData();
//查询操作
const handleSearch = () => {
  query.pageNum = 1;
  getData();
};
// 分页大小
const handleSizeChange = (val) => {
  query.pageSize = val;
  // eslint-disable-next-line no-undef
  getData();
};
// 分页导航
const handlePageChange = (val) => {
  query.pageNum = val;
  // eslint-disable-next-line no-undef
  getData();
};
const indexMethod = (index, number) => {
  return (index + 1)
};
const handleSelectReceive = (studentId) => {
  router.push({path: "/admin/myNotReceived", query: {studentId: studentId}});
}


</script>

<style scoped>
.clist {
  background: #3ca2e0;
  height: 50px;
  font-size: 25px;
  display: flex;
  align-items: center;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
